<template>
  <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px" class="form-class">
    <el-form-item label="处置区域" prop="region">
      <el-cascader
        ref="regionRef"
        v-model="formData.region"
        :options="areaOptions"
        :props="regionProps"
        style="width: 280px"
        @change="regionChange"
      />
    </el-form-item>
    <el-form-item label="责任部门">
      <el-cascader
        ref="deptRef"
        v-model="formData.responsibilityDeptRegion"
        :options="areaOptions"
        :props="deptProps"
        style="width: 280px"
        @change="deptChange"
      />
    </el-form-item>
    <el-form-item label="责任人" prop="responsible">
      <el-input
        v-model="formData.responsible"
        placeholder="请输入或选择责任人"
        style="width: 280px"
        @change="responChange"
      />
      <el-popover placement="top" title width="320" trigger="click">
        <el-input
          v-model="searchKyWord"
          @change="getdeptList"
          size="small"
          placeholder="请输入姓名或手机号,Enter开始搜索"
        ></el-input>
        <div style="height: 230px; overflow: auto">
          <el-row
            v-for="(item, index) in gridData"
            :key="index"
            style="border-bottom: 1px dashed rgba(0, 0, 0, 0.3); padding: 8px; cursor: pointer"
            @click.native="setUserNameAndPhone(item)"
          >
            <el-col :span="12"
              ><p>{{ item.name }}</p></el-col
            >
            <el-col :span="12"
              ><p>{{ item.mobile }}</p></el-col
            >
            <el-col :span="24"
              ><p>{{ item.deptNameList[0] }}</p></el-col
            >
          </el-row>
          <div v-if="gridData.length === 0" style="line-height: 230px; user-select: none; text-align: center">
            暂无数据
          </div>
        </div>
        <el-button slot="reference" type="primary" class="ml-10">选择</el-button>
      </el-popover>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input
        type="text"
        v-model="formData.phone"
        placeholder="请输入手机号"
        style="width: 280px"
        @change="phoneChange"
      ></el-input>
    </el-form-item>
    <el-form-item label="指令" prop="instructOutput">
      <el-input type="textarea" @change="instructOutputChange" rows="4" v-model="formData.instructOutput"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { getQyyu, getV2Region, getRegionDeptAuth, getDeptList } from '../../utils/api';
export default {
  props: {
    dataSource: Object,
  },
  data() {
    return {
      formData: { responsible: '', phone: '', region: '', instructOutput: '' },
      rules: {
        region: [{ required: true, message: '请选择处置区域', trigger: 'change' }],
        responsible: [{ required: true, message: '请输入或选择责任人', trigger: 'change' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
            message: '请输入合法的手机号',
          },
        ],
        instructOutput: [{ required: true, message: '请输入指令', trigger: 'change' }],
      },
      areaOptions: [],
      regionOptions: [{ value: 'root-quzhou-qujiangqu', label: '衢江区', uuid: '24781' }],
      regionProps: {
        checkStrictly: true,
        lazy: true,
        emitPath: false,
        lazyLoad: (node, resolve) => {
          this.regionLazyLoad(node, resolve);
        },
      },
      deptProps: {
        checkStrictly: true,
        lazy: true,
        emitPath: false,
        lazyLoad: (node, resolve) => {
          this.deptLazyLoad(node, resolve);
        },
      },
      searchKyWord: '',
      gridData: [],
    };
  },
  methods: {
    regionChange() {
      this.$nextTick(() => {
        this.$emit('setValue', 'regionName', this.$refs.regionRef.presentText);
      });
    },
    deptChange() {
      this.$nextTick(() => {
        this.$emit('setValue', 'responsibilityDeptName', this.$refs.deptRef.presentText);
      });
    },
    responChange(value) {
      this.$emit('setValue', 'responsible', value);
    },
    phoneChange(value) {
      this.$emit('setValue', 'phone', value);
    },
    instructOutputChange(value) {
      this.$emit('setValue', 'instructOutput', value);
    },
    setUserNameAndPhone(v) {
      console.log(v);
      this.formData.responsible = v.name;
      this.formData.phone = v.mobile;
      this.$emit('setValue', 'responsible', v.name);
      this.$emit('setValue', 'phone', v.mobile);
    },
    getdeptList() {
      getDeptList(this.searchKyWord).then((res) => {
        if (res.success) {
          this.gridData = res.data;
        }
      });
    },
    regionLazyLoad(node, resolve) {
      const { value } = node;
      getV2Region({ regionCode: value }).then((res) => {
        if (res.success) {
          const { subRegions } = res.data;
          if (subRegions.length === 0) {
            const nodes = [{ label: '本级', value, leaf: 'leaf' }];
            resolve(nodes);
          } else {
            const nodes = subRegions.map((v) => ({
              label: v.regionName,
              value: v.regionCode,
              leaf: subRegions.length === 0 ? true : false,
            }));
            resolve(nodes);
          }
        }
      });
    },
    deptLazyLoad(node, resolve) {
      const { level, value, label, isLeaf } = node;
      if (level >= 1 && label !== '本级' && !isLeaf) {
        const regionCode = value;
        getRegionDeptAuth({ regionCode }).then((res) => {
          const { depts, subRegions } = res.data;
          const nodes = depts.map((v) => ({
            label: v.deptName,
            value: v.deptCode,
            uuid: v.uuid,
            leaf: true,
          }));
          const nodes2 = subRegions.map((v) => ({
            label: v.regionName,
            value: v.regionCode,
            uuid: v.uuid,
            leaf: v.regionName === '本级',
          }));
          resolve([...nodes2, ...nodes]);
        });
      } else {
        resolve();
      }
    },
  },
  mounted() {
    getQyyu().then(res => {
      if (res.data.success) {
        this.areaOptions = res.data.data[0].children;
        console.log(this.areaOptions, 'this.areaOptions')
      }
    });
    if (this.dataSource) {
      this.formData.responsible = this.dataSource.responsible;
      this.formData.phone = this.dataSource.phone;
      this.$refs.regionRef.inputValue = this.dataSource.regionName;
      this.formData.region = this.dataSource.regionCode;
      this.$refs.deptRef.inputValue = this.dataSource.responsibilityDeptName || '';
    }
  },
};
</script>


<style>
.form-class .el-form-item__label {
  color: #fff;
}
.form-class .el-textarea__inner,
.form-class .el-input__inner {
  /* background: linear-gradient(0deg, rgba(22, 46, 79, 0.7), rgba(5, 13, 35, 0.7)); */
  background: transparent;
  border: 1px solid #43ccff;
  box-shadow: 0px 0px 4px 0px rgba(2, 16, 45, 0.46);
  border-radius: 1px;
  color: #fff;
}
.el-collapse-item__wrap {
  background-color: transparent;
  margin-top: 10px;
}
.el-collapse-item__header {
  background-color: transparent;
  color: #fff;
}
.block p {
    line-height: 20px;
}
.el-input__inner{
  font-size: 18px;
}
</style>
